<template>
  <div class="container-box">
    <div id="container"></div>
    <div class="btns">
      <el-button>Default</el-button>
      <el-button type="danger" plain @click="lockMapBounds">锁定边界</el-button>
      <el-button type="primary" plain @click="unlockMapBounds"
        >清除边界</el-button
      >
      <el-button type="primary" plain @click="panBy">平移像素(50,50)</el-button>
      <el-button type="primary" plain @click="panTo"
        >中心点平移至(北京市)</el-button
      >
      <el-input v-model="cityName" placeholder="请输入">
        <template #append>
          <el-button @click="panToCity">跳转</el-button>
        </template>
      </el-input>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <el-card class="info">
      <p>
        级别：<el-text type="primary">{{ infoData.zoom }}</el-text>
      </p>
      <p>
        中心点：<el-text type="primary">{{ infoData.center }}</el-text>
      </p>
      <p>
        行政区：<el-text type="primary"
          >{{ infoData.province }}{{ infoData.city
          }}{{ infoData.district }}</el-text
        >
      </p>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;
// 地图级别与中心点坐标数据等
const infoData = ref({
  zoom: "",
  center: "",
  city: "",
  district: "",
  province: "",
});
const cityName = ref("");
/**
 * 记录地图信息到 infoData
 *
 * @returns 无返回值
 */
const logMapinfo = () => {
  // 获取地图缩放级别，并保存到 infoData 的 value 属性中的 zoom
  infoData.value.zoom = map.getZoom();
  // 获取地图中心点坐标，并转换为字符串后保存到 infoData 的 value 属性中的 center
  infoData.value.center = map.getCenter().toString();
  // 获取地图所在的城市信息
  map.getCity((info) => {
    // 获取省份信息，并保存到 infoData 的 value 属性中的 province
    infoData.value.province = info.province;
    // 获取城市信息，并保存到 infoData 的 value 属性中的 city
    infoData.value.city = info.city;
    // 获取区县信息，并保存到 infoData 的 value 属性中的 district
    infoData.value.district = info.district;
  });
};
/**
 * 锁定地图的边界范围
 *
 * @returns 无返回值
 */
const lockMapBounds = () => {
  // 获取地图的边界范围
  var bounds = map.getBounds();
  // 设置地图的边界限制为获取的边界范围
  map.setLimitBounds(bounds);
};
/**
 * 解锁地图边界限制
 *
 * @returns 无返回值，直接执行操作
 */
const unlockMapBounds = () => {
  // 清除地图的边界限制
  map.clearLimitBounds();
};
/**
 * 平移地图
 *
 * @description 将地图向右下方平移50个像素
 * @returns 无返回值
 */
const panBy = () => {
  // 将地图向右下方平移50个像素
  map.panBy(50, 50);
};
/**
 * 将地图中心移动到指定坐标点
 *
 * @returns 无返回值
 */
const panTo = () => {
  // 将地图中心移动到指定坐标点
  map.panTo([116.405467, 39.907761]);
};
/**
 * 将地图平移到指定城市
 *
 * @returns 无返回值
 */
const panToCity = () => {
  if (!cityName.value) {
    cityName.value = "武汉市";
  }
  map.setCity(cityName.value);
};

onMounted(() => {
  AMapLoader.load({
    key: "44b72052ac84013f682f33519a25b931", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        showIndoorMap: true, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
        dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
        keyboardEnable: true, //地图是否可通过键盘控制，默认为true
        doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
        zoomEnable: true, //地图是否可缩放，默认值为true
        rotateEnable: true, // 地图是否可旋转，3D视图默认为true，2D视图默认false
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [114.285781, 30.616593], // 初始化地图中心点位置
      });
      logMapinfo();
      map.on("moveend", logMapinfo);
      map.on("zoomend", logMapinfo);
    })
    .catch((e) => {
      console.log(e);
    });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped lang="scss">
.container-box {
  width: 100;
  height: 100%;
  position: relative;
  #container {
    width: 100%;
    height: calc(100vh);
  }
  .btns {
    position: absolute;
    right: 20px;
    top: 20px;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(5, 1fr);
  }
  .info {
    position: absolute;
    right: 20px;
    bottom: 20px;
    min-width: 270px;
  }
}
</style>
